<template>
  <div class="home">
    <!-- 头部 -->
    <el-header>
      <div class="logo">
        <img src="../../assets/logo.jpg" alt />
      </div>
      <span class="title_name">车辆运行维护车务机务全生命周期管理统计子系统</span>
      <!-- 用户 -->
      <div class="avatar" @mouseenter="avatarShow = true" @mouseleave="avatarShow = false">
        <!-- <el-avatar icon="iconfont icon-renxiang-copy-copy"></el-avatar> -->
        <span class="account_name">{{areaName}}</span>
        <div class="account_info" v-if="avatarShow">
          <!-- <span></span> -->
          <span @click="loginOut">退出登录</span>
        </div>
      </div>
    </el-header>
    <!-- 主体地图显示 -->
    <el-container style="height: 30%;">
      <!-- <el-aside>111</el-aside> -->
      <el-main>
        <!-- 顶部工具栏 -->
        <top-tool-bar />
        <!-- 地图显示 -->
        <map-view></map-view>
        <div class="bottom_box"></div>
      </el-main>
      <!-- <el-footer>111</el-footer> -->
      <!-- <div class="bottom_box">11</div> -->
      <!-- <el-aside> -->
      <!-- <vdr class="vdr" :w="200" :h="50" @resizing="resizeWidth" :draggable="false"> -->
      <!-- 报警信息 -->
      <!-- <warning-view></warning-view> -->
      <!-- </vdr> -->
      <!-- </el-aside> -->
    </el-container>
    <!-- 底部信息列表 -->
    <!-- <el-footer>
      <vdr class="vdr" :w="200" :h="50" @resizing="resize" :draggable="false">
        <div ref="footerTitle" class="footer_title">人员信息监控列表</div>
        <monitoring-view></monitoring-view>
      </vdr>
    </el-footer>
    <div class="cover" v-if="coverIsShow" @click="closeCover"></div>-->
    <!-- 报警详情 -->
    <!-- <div class="warning_details" v-if="openWarningDetails">
      <h2>
        <span class="iconfont icon-jinggao1" />
        <span>人 员 报 警 信 息</span>
        <i class="iconfont icon-guanbi" @click="coverIsShow = false, openWarningDetails = flase" />
      </h2>
      <div class="warning_menu">
        <el-button class="iconfont icon-zhengque" type="success">解除报警</el-button>
        <el-button class="iconfont icon-shanchu" type="danger">删除报警</el-button>
        <span>
          报警数量：
          <span class="warning_nums">{{warningData.length}}</span> 条
        </span>
        <el-button
          class="iconfont icon-daochu excel"
          style="background-color: #1f7246; color: #fff; margin-left: 10px; border: 0 none;"
          @click="exportExcel"
        >导出Excel</el-button>
        <el-button class="iconfont icon-shanchutubiao" type="danger">删除图标</el-button>
        <span>报警类型：</span>
        <el-select v-model="warningTypeValue" placeholder="请选择类型">
          <el-option value="全部"></el-option>
          <el-option v-for="(item,index) in warningTypeList" :key="index+'only'" :value="item" />
        </el-select>
        <span>分组：</span>
        <el-select v-model="warningGroupValue" placeholder="请选择分组" popper-class="group">
          <el-option
            v-for="(item,index) in warningGroupList"
            :value="item.CLIENT_NO"
            :label="item.CLIENT_NAME"
            :key="index"
          ></el-option>
        </el-select>
        <el-button
          class="iconfont icon-sousuo"
          type="primary"
          @click="searchWarningData"
          style="margin-left: 10px;"
        >报警查询</el-button>
      </div>
      <div class="warningContent">
        <el-table :data="warningData" border style="width: 100%" :default-sort="sort">
          <el-table-column prop="VID" label="人员编号" width="80" align="center"></el-table-column>
          <el-table-column prop="NAME" label="姓名" width="90" align="center"></el-table-column>
          <el-table-column prop="CLIENT_NO" label="班组编号" width="120" align="center"></el-table-column>
          <el-table-column prop="address" label="报警位置" align="center"></el-table-column>
          <el-table-column prop="ALARM_DATE" label="报警时间" width="180" align="center"></el-table-column>
          <el-table-column prop="LONGITUDE" label="经度" width="100" align="center"></el-table-column>
          <el-table-column prop="LATITUDE" label="纬度" width="100" align="center"></el-table-column>
          <el-table-column prop="ALARM_TYPE" label="报警类型" width="180" align="center"></el-table-column>
        </el-table>
      </div>
    </div>-->
  </div>
</template>

<script>
// 引入顶部工具栏
import topToolBar from '@/views/TrafficEngineer/ToolBar/index.vue'

// 引入地图组件
import mapView from '@/views/TrafficEngineer/trafficMap.vue'
// 引入人员监控列表组件
// import monitoringView from '@/views/CleanerWork/Monitoring.vue'
// 引入报警组件
// import warningView from '@/views/CleanerWork/Warning.vue'

import eventBus from '@/eventBus.js'

import export2Excel from '@/utils/exportExcel/index.js'

export default {
  components: {
    'map-view': mapView,
    // 'monitoring-view': monitoringView,
    // 'warning-view': warningView,
    'top-tool-bar': topToolBar
  },
  data () {
    return {
      areaName: '',
      coverIsShow: false,
      originalData: [],
      warningData: [],
      // warningType: [, 'SOS报警', '心跳异常报警', '长时间不动位置报警', '长时间离开作业区域报警', '长时间不上传位置报警', '一人多终端佩戴报警', '血压异常报警', '未知报警', , '开机', '关机', , , '低电量报警'],
      warningTypeList: [],
      warningTypeValue: '全部',
      warningGroupList: [],
      warningGroupValue: '0000004',
      sort: { prop: 'VID', order: 'ascending' },
      openWarningDetails: false,
      containerHeight: 0,
      footerHeight: 0,
      mainWidth: 0,
      asideWidth: 0,
      avatarShow: false
    }
  },
  mounted () {
    // eventBus.$emit('mapSize', document.querySelector('.el-main').clientHeight - 32)
    // this.containerHeight = document.querySelector('.el-container').clientHeight
    // this.footerHeight = document.querySelector('.el-footer').clientHeight
    // this.mainWidth = document.querySelector('.el-main').clientWidth
    // this.asideWidth = document.querySelector('.el-aside').clientWidth
  },
  created () {
    this.getAreaName()
    // eventBus.$on('isCover', val => {
    //   this.coverIsShow = val
    // })
    // 报警信息列表
    // eventBus.$on('warningData', val => {
    //   this.originalData = val.map(item => {
    //     item.ALARM_DATE = item.ALARM_DATE.replace('T', ' ').split('.')[0]
    //     if (item.ALARM_TYPE != null) {
    //       item.ALARM_TYPE = this.warningType[item.ALARM_TYPE]
    //     } else {
    //       item.ALARM_TYPE = '未知报警'
    //     }
    //     this.warningTypeList.push(item.ALARM_TYPE)
    //     return item
    //   })
    //   this.warningTypeList = new Set(this.warningTypeList)
    //   eventBus.$emit('warningNum', this.originalData.length)
    //   this.searchWarningData()
    // })

    // eventBus.$on('warningGroup', val => {
    //   this.warningGroupList = val
    // })
    // eventBus.$on('warningDetails', val => {
    //   this.openWarningDetails = val
    //   this.coverIsShow = val
    // })
  },
  methods: {
    closeCover () {
      this.coverIsShow = false
      this.openWarningDetails = false
      eventBus.$emit('closeCover', false)
    },
    // 获取区域名称
    async getAreaName () {
      const { data } = await this.$Http.get(`/DataListCompany/GetLoginUserApi?ClientNo=${this.$route.query.ClientNo}`)
      this.areaName = data[0].USERNAME
    },
    // 查询报警信息
    searchWarningData () {
      if (this.warningTypeValue !== '全部') {
        this.warningData = this.originalData.filter(item => this.warningTypeValue === item.ALARM_TYPE)
      } else {
        this.warningData = this.originalData
      }
      if (this.warningGroupValue !== '0000004') this.warningData = this.warningData.filter(item => this.warningGroupValue === item.CLIENT_NO)
    },
    // 导出Excel
    exportExcel () {
      const excelName = document.querySelector('.group li.selected span').innerText + '报警信息'
      const tHeader = ['人员编号', '姓名', '班组编号', '报警位置', '报警时间', '经度', '纬度', '报警类型']
      const filterVal = ['VID', 'NAME', 'CLIENT_NO', 'address', 'ALARM_DATE', 'LONGITUDE', 'LATITUDE', 'ALARM_TYPE']
      export2Excel(tHeader, filterVal, this.warningData, excelName)
    },
    // 信息列表窗口缩放
    resize (x, y) {
      document.querySelector('.el-footer').style.height = this.footerHeight - y + 'px'
      document.querySelector('.el-container').style.height = this.containerHeight + y + 'px'
      eventBus.$emit('mapSize', y)
    },
    // 报警列表信息缩放
    resizeWidth (x) {
      document.querySelector('.el-aside').style.width = this.asideWidth - x + 'px'
      document.querySelector('.el-main').style.width = this.mainWidth + x + 'px !important'
    },
    // 退出登录
    loginOut () {
      // this.$router.replace({ path: '/05' })
      // console.log(11111)
      this.avatarShow = false
    }
  }
}
</script>

<style scoped lang="less">
.home {
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.el-header {
  height: 60px;
  .logo {
    float: left;
    line-height: 60px;
    img {
      height: 50px;
      margin-right: 20px;
      vertical-align: middle;
    }
  }
  .title_name {
    line-height: 60px;
    font-size: 30px;
    color: #3baefa;
    font-weight: 600;
  }
  .avatar {
    height: 60px;
    line-height: 60px;
    float: right;
    position: relative;
    .header_img {
      display: inline-block;
      vertical-align: middle;
      margin-right: 5px;
      width: 40px;
      height: 40px;
      // background-color: #000;
      cursor: pointer;
      border-radius: 50%;
      overflow: hidden;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .account_name {
      cursor: pointer;
      color: #3baefa;
    }
    .account_info {
      width: 100px;
      line-height: 20px;
      border: 1px solid #ccc;
      background-color: #fff;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      z-index: 1;
      span {
        display: block;
        text-align: center;
        line-height: 22px;
        color: #333;
        cursor: pointer;
        &:hover {
          color: #fff;
          background-color: #3baefa;
        }
      }
    }
  }
}

.el-container {
  flex: 1;
}

.top_box {
  display: flex;
  height: 594px;
  .sidebar {
    width: 200px;
    display: none;
  }
  .content {
    flex: 1;
    .content-box {
      display: flex;
      // position: relative;
      .map_view {
        flex: 1;
      }
    }
  }
}

.el-footer {
  width: 100%;
  min-height: 200px !important;
  // position: relative;
  // margin-bottom: 20px;
  .footer_title {
    line-height: 30px;
    background-color: #3baefa;
    color: #fff;
    cursor: s-resize;
    padding-left: 20px;
    font-weight: 600;
  }
}
.el-aside {
  // height: 300px;
  overflow: hidden;
  /deep/.handle-tm {
    display: none !important;
  }
}
.cover {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 1;
}
.warning_details {
  width: 1100px;
  height: 400px;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  overflow: hidden;
  padding-bottom: 10px;
  h2 {
    height: 40px;
    display: flex;
    align-items: center;
    padding-left: 5px;
    color: #666;
    border-bottom: 1px solid #ccc;
    span {
      margin-right: 5px;
    }
    i {
      margin-left: 922px;
    }
  }
  .warning_menu {
    height: 30px;
    border-bottom: 1px solid #ccc;
    display: flex;
    align-items: center;
    padding-left: 5px;
    span {
      margin-left: 10px;
      display: flex;
      align-items: center;
      color: #666;
      &.warning_nums {
        margin-left: 0;
        // justify-content: center;
        padding: 0 4px;
        border-bottom: 1px solid #ccc;
      }
    }
    .el-select {
      width: 150px;
      height: 26px;
    }
    #group {
      width: 100px;
    }
  }
  .warningContent {
    height: 330px;
    // overflow-y: auto;
    .el-table {
      height: 100%;
      /deep/.el-table__body-wrapper {
        height: calc(~'100% - 35px');
        overflow-y: auto;
        padding-right: 10px;
        box-sizing: border-box;
      }
    }
  }
}
.vdr {
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  // bottom: 0 !important;
  height: 100% !important;
  width: 100% !important;
}
</style>
